<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dotolist</title>
    <link rel="stylesheet" href="./css/resent.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./lib/vue.js"></script>
    <style>
        .linethrough{
            text-decoration: line-through;
        }
        .pageActive{
            width: 20px;
            height: 20px;
            list-style: none;
            background-color: blue;
            color: white;
            border-radius: 5px;
            text-align: center;
            line-height: 20px;
        }
        .pageActive2{
            width: 20px;
            height: 20px;
            list-style: none;
            background-color: orange;
            color: white;
            border-radius: 5px;
            text-align: center;
            line-height: 20px;
        }
        .pageUl{
            width: 150px;
            height: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="todoList">
        <header>
          <content>
            <label for="title">ToDoList</label>
            <input type="text" placeholder="添加ToDo"/>
          </section>
        </header>
        <section>
          <h2>正在进行
            <span>1</span>
          </h2>
          <ol class="demo-box">
            <li>
              <input type="checkbox">
              <p>记得吃药</p>
              <a>-</a>
            </li>
          </ol>
          <h2>已经完成
            <span>1</span>
          </h2>
          <ul>
            <li draggable="true">
              <input type="checkbox"checked="checked">
              <p>记得吃饭</p>
              <a>-</a>
            </li>
          </ul>
        </section>
        </div>
</body>
<script>
    var vm = new Vue({
        el:"#todolist",
        data:{
            msg:"添加",
            thing:"",
            list:[],
            list1:[],
            page:0,
            pagesize:5,
            pagelist:[],
            finish:"",
            curindex:0,
            styleObj:true,
            // keyword=""
        },
        computed:{
           litlist(){
                return this.pagelist
                
            },
            pageNum(){
                
                return Math.ceil((this.list.length)/(this.pagesize))
            }
        },
        created(){
        },
       
        methods:{
            add(){
                this.page=Math.ceil((this.list.length)/(this.pagesize))
                this.curindex=this.page-1;
                this.msg="添加"
                if(this.list1.length!=0){
                    this.list=this.list1
                    this.list1=[];
                    this.thing=""
                this.pagelist=this.list.slice(this.pagesize*(this.pageNum-1),this.pagesize*(this.pageNum))
                return false
                }
                this.list.push({note:this.thing,completed:false,id:Date.now()});
                if(this.list.length-this.pagesize*this.pageNum-1<=this.pagesize){

                    this.pagelist=this.list.slice(this.pagesize*(this.pageNum-1),this.pagesize*(this.pageNum))
                }
               
                    
                this.thing="";
             
            },
            del(_id){
                // this.list
                this.list.forEach((item,index)=>{
                    console.log(this.list)
                    if(item.id==_id){
                this.list.splice(index,1);
                    
                    }
                })
                this.pagelist=this.list.slice(this.pagesize*(this.pageNum-1),this.pagesize*(this.pageNum))
            },
            changePage(i){
                this.page=i
                this.pagelist=this.list.slice(this.pagesize*(this.page),this.pagesize*(this.page+1))
                this.curindex=i;
            },
            search(){
                this.msg="继续添加"
                let arr = this.list.filter((item, index) => {
            var reg = new RegExp(this.thing, 'i')
            return reg.test(item.note);
            this.thing="";
            // page=0
          })
            this.list1=this.list
            this.list=arr;
            this.pagelist=this.list.slice(this.pagesize*(this.page),this.pagesize*(this.page+1))
            console.log("aaa")
            }
          
           
        },
        mounted(){
            this.curindex=this.pageNum;
        }
    })
</script>
</html>